import { useState, useEffect } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import { useMeta } from '@/stores'
import { Space, Button } from 'antd-mobile'
import styles from './index.module.less'

const UI = (props: any) => {

  const { meta, setMeta } = useMeta((state) => state)
  const navigate = useNavigate()

  useEffect(() => {
    setMeta('UI', 'second-page')
  }, [])

  const toComponents = (key: string) => {
    navigate('/second-page/ui/' + key, { replace: true })
  }

  return <div className={styles.UI}>
    <Space direction='vertical'>
      <Button onClick={() => { toComponents('form-list') }} size='small'>查看表单控件</Button>
    </Space>
    <Outlet />
  </div>
}

export default UI
